<template>
  <div class="knowledge-graph-container">
    <div ref="chart" class="knowledge-graph-chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'KnowledgeGraph',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart;
      chartDom.style.height = '600px';
      
      const chart = echarts.init(chartDom);
      const option = {
        title: {
          text: '企业中台知识图谱',
          subtext: '核心实体关系可视化',
          left: 'center'
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [{
          type: 'graph',
          layout: 'force',
          focusNodeAdjacency: true,
          roam: true,
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [4, 10],
          edgeLabel: {
            fontSize: 20
          },
          force: {
            repulsion: 1000,
            edgeLength: 200
          },
          data: this.generateNodes(),
          links: this.generateLinks(),
          categories: this.generateCategories(),
          lineStyle: {
            opacity: 0.9,
            width: 2,
            curveness: 0.2
          },
          label: {
            show: true,
            position: 'right',
            formatter: '{b}'
          },
          emphasis: {
            scale: true,
            focus: 'adjacency',
            label: {
              show: true,
              fontSize: 18,
              fontWeight: 'bold'
            },
            itemStyle: {
              borderColor: '#333',
              borderWidth: 2,
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };
      
      chart.setOption(option);
      
      // 添加窗口resize监听
      const resizeHandler = () => chart.resize();
      window.addEventListener('resize', resizeHandler);
      
      // 在组件销毁时移除监听
      this.$once('hook:beforeDestroy', () => {
        window.removeEventListener('resize', resizeHandler);
        chart.dispose();
      });
    },
    generateNodes() {
      return [
        { name: '企业中台', category: 0, symbolSize: 100 },
        // 业务中台分支
        { name: '业务中台', category: 1, symbolSize: 70 },
        { name: '客户服务中台', category: 2, symbolSize: 50 },
        { name: '账单中心', category: 3, value: '账单推送', symbolSize: 30 },
        { name: '交互中心', category: 3, value: '服务评价配置管理', symbolSize: 30 },
        { name: '消息中心', category: 3, value: '停电信息推送/查询', symbolSize: 30 },
        { name: '用户中心', category: 3, value: '户号管理', symbolSize: 30 },
        { name: '客服中心', category: 3, value: '工单办理', symbolSize: 30 },
        { name: '项目管理中台', category: 2, symbolSize: 50 },
        { name: '储备中心', category: 3, value: '项目立项分析、可研信息维护', symbolSize: 30 },
        { name: '报表中心', category: 3, value: '报表数据生成/查询', symbolSize: 30 },
        { name: '流程中心', category: 3, value: '业务流程定义/参与者管理', symbolSize: 30 },
        { name: '财务管理中台', category: 2, symbolSize: 50 },
        { name: '主数据中心', category: 3, value: '单位信息查询', symbolSize: 30 },
        { name: '成员管理', category: 3, value: '员工信息回写', symbolSize: 30 },
        { name: '电网资源业务中台', category: 2, symbolSize: 50 },
        { name: '设备中心', category: 3, value: '电网设备分析服务', symbolSize: 30 },
        { name: '地理信息中心', category: 3, value: 'GIS空间分析', symbolSize: 30 },
        // 技术中台分支
        { name: '技术中台', category: 1, symbolSize: 70 },
        { name: '统一服务调度组件', category: 2, symbolSize: 50 },
        { name: '服务网关', category: 3, value: 'esb-service-gateway', symbolSize: 30 },
        { name: '认证服务', category: 3, value: 'esb-gateway-authorization', symbolSize: 30 },
        { name: '配置引擎', category: 3, value: '各中台conductor服务', symbolSize: 30 },
        { name: '大模型平台', category: 2, symbolSize: 50 },
        { name: '知识库', category: 3, value: '语义检索', symbolSize: 30 },
        { name: '智问API插件', category: 3, symbolSize: 30 },
        // 数据中台分支
        { name: '数据中台', category: 1, symbolSize: 70 },
        { name: '服务成熟度体系', category: 2, symbolSize: 50 },
        { name: '运营标签', category: 3, value: '调用活跃度、安全性', symbolSize: 30 },
        { name: '管理标签', category: 3, value: '资料完整度、重复建设', symbolSize: 30 },
        { name: '基础标签', category: 3, value: '接口类型、服务状态', symbolSize: 30 },
        { name: '应用标签', category: 3, value: '响应时长、故障率', symbolSize: 30 },
        { name: '数据治理组件', category: 2, symbolSize: 50 },
        { name: '元数据管理', category: 3, symbolSize: 30 },
        { name: '数据脱敏服务', category: 3, symbolSize: 30 }
      ];
    },
    generateLinks() {
      return [
        // 企业中台主干关系
        { source: '企业中台', target: '业务中台', label: '包含' },
        { source: '企业中台', target: '技术中台', label: '包含' },
        { source: '企业中台', target: '数据中台', label: '包含' },
        // 业务中台分支关系
        { source: '业务中台', target: '客户服务中台', label: '包含' },
        { source: '客户服务中台', target: '账单中心', label: '包含' },
        { source: '客户服务中台', target: '交互中心', label: '包含' },
        { source: '客户服务中台', target: '消息中心', label: '包含' },
        { source: '客户服务中台', target: '用户中心', label: '包含' },
        { source: '客户服务中台', target: '客服中心', label: '包含' },
        { source: '业务中台', target: '项目管理中台', label: '包含' },
        { source: '项目管理中台', target: '储备中心', label: '包含' },
        { source: '项目管理中台', target: '报表中心', label: '包含' },
        { source: '项目管理中台', target: '流程中心', label: '包含' },
        { source: '业务中台', target: '财务管理中台', label: '包含' },
        { source: '财务管理中台', target: '主数据中心', label: '包含' },
        { source: '财务管理中台', target: '成员管理', label: '包含' },
        { source: '业务中台', target: '电网资源业务中台', label: '包含' },
        { source: '电网资源业务中台', target: '设备中心', label: '包含' },
        { source: '电网资源业务中台', target: '地理信息中心', label: '包含' },
        // 技术中台分支关系
        { source: '技术中台', target: '统一服务调度组件', label: '包含' },
        { source: '统一服务调度组件', target: '服务网关', label: '包含' },
        { source: '统一服务调度组件', target: '认证服务', label: '包含' },
        { source: '统一服务调度组件', target: '配置引擎', label: '包含' },
        { source: '技术中台', target: '大模型平台', label: '包含' },
        { source: '大模型平台', target: '知识库', label: '包含' },
        { source: '大模型平台', target: '智问API插件', label: '包含' },
        // 数据中台分支关系
        { source: '数据中台', target: '服务成熟度体系', label: '包含' },
        { source: '服务成熟度体系', target: '运营标签', label: '包含' },
        { source: '服务成熟度体系', target: '管理标签', label: '包含' },
        { source: '服务成熟度体系', target: '基础标签', label: '包含' },
        { source: '服务成熟度体系', target: '应用标签', label: '包含' },
        { source: '数据中台', target: '数据治理组件', label: '包含' },
        { source: '数据治理组件', target: '元数据管理', label: '包含' },
        { source: '数据治理组件', target: '数据脱敏服务', label: '包含' }
      ];
    },
    generateCategories() {
      return [
        { name: '核心中台' },
        { name: '中台类型' },
        { name: '业务领域' },
        { name: '功能模块' }
      ];
    }
  }
};
</script>

<style scoped>
.knowledge-graph-container {
  width: 100%;
  height: 100%;
  min-height: 600px; /* 添加最小高度保证显示 */
}

.knowledge-graph-chart {
  width: 100%;
  height: 100%;
}
</style>